import { defineComponent, PropType, ref } from 'vue';
import AudioControl from './components/audioControl';
import useModule from './index.module';
import styles from './index.module.scss';
import { AudioOrigin } from './type';

export default defineComponent({
  name: 'AudioPlayer',
  props: {
    /** 传入音频的相关数据 */
    audioData: {
      type: Object as PropType<AudioOrigin>,
      default: () => {
        return {};
      }
    },
    /** lrc课本原文 */
    lrc: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const lrcContainer = ref(null);
    const lrcUl = ref(null);
    const {
      methods,
      lrcData,
      currentIndex,
      skeletonNum
    } = useModule(props, lrcContainer, lrcUl);

    return () => (
      <div class={styles.audioPlayer}>
        <div
          ref={lrcContainer}
          class={styles.lrcContainer}
        >
          <ul
            ref={lrcUl}
            class={[styles.dataDist, styles.scrollBar]}
          >
            {
              lrcData.value.length ? lrcData.value.map((item, index) => {
                return <li
                  key={item.time}
                  class={{
                    [styles.active]: currentIndex.value === index
                  }}
                >
                  {
                    item.value.map(item1 => {
                      return <p
                        key={item1}
                      >
                        {
                          item1
                        }
                      </p>
                    })
                  }
                </li>
              }) : <div class={styles.skeleton}>
              {
                Array.from({ length: skeletonNum.value }).map((_item, index) => {
                  return <div
                    key={`skeleton${index}`}
                    class={[styles.item, styles.animatedSkeleton]}
                  />
                })
              }
            </div>
            }
          </ul>
        </div>
        <div class={styles.audioContainer}>
          <AudioControl
            audioData={props.audioData}
            on-timeupdate={methods.timeUpdate}
          />
        </div>
      </div>
    )
  }
})
